<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>按钮</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            按钮
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>可作为按钮使用的标签或元素:<code>a</code><code>button</code><code>inut</code></p>
                                    <p>
                                        <a class="btn btn-default" href="#" role="button">超链接按钮</a>
                                        <button class="btn btn-default" type="submit">Button按钮</button>
                                        <input class="btn btn-default" type="button" value="Input按钮">
                                        <input class="btn btn-default" type="submit" value="Submit按钮">
                                    </p>
                                    <p>按钮样式 <code>.btn-default</code>
                                        <code>.btn-primary</code>
                                        <code>.btn-success</code>
                                        <code>.btn-info</code>
                                        <code>.btn-warning</code>
                                        <code>.btn-danger</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-default">默认</button>
                                        <button type="button" class="btn btn-primary">首选</button>
                                        <button type="button" class="btn btn-success">成功</button>
                                        <button type="button" class="btn btn-info">信息</button>
                                        <button type="button" class="btn btn-warning">警告</button>
                                        <button type="button" class="btn btn-danger">危险</button>
                                        <button type="button" class="btn btn-link">链接</button>
                                        <button type="button" class="btn  btn-link disabled">链接禁用</button>
                                    </p>
                                    <p>描边按钮
                                        <code>.btn-outline</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-primary btn-outline">重要</button>
                                        <button type="button" class="btn btn-success btn-outline">成功</button>
                                        <button type="button" class="btn btn-info btn-outline">信息</button>
                                        <button type="button" class="btn btn-warning btn-outline">警告</button>
                                        <button type="button" class="btn btn-danger btn-outline">危险</button>
                                        <button type="button" class="btn btn-danger btn-outline disabled">危险</button>
                                    </p>
                                    <p>按钮大小
                                        <code>.btn-lg</code>
                                        <code>.btn-sm</code>
                                        <code>.btn-xs</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn btn-lg  btn-primary">大按钮</button>
                                        <button type="button" class="btn btn-success">默认尺寸按钮</button>
                                        <button type="button" class="btn btn-sm btn-warning">小按钮</button>
                                        <button type="button" class="btn btn-xs btn-danger">超小按钮</button>
                                    </p>
                                    <p>图标按钮
                                    </p>
                                    <p>
                                        <button type="button" class="btn  btn-primary btn-lg ">
                                            <i class="fa fa-fw fa-check"></i>提交</button>
                                        <button type="button" class="btn  btn-success ">
                                            <i class="fa fa-fw fa-upload"></i>上传</button>
                                        <button type="button" class="btn  btn-warning btn-sm btn-outline ">
                                            <i class="fa fa-fw fa-download"></i>下载</button>
                                        <button type="button" class="btn  btn-default  btn-xs">
                                            <i class="fa fa-fw fa-map-marker"></i>中国地图</button>
                                        <button type="button" class="btn  btn-primary btn-lg ">
                                            <i class="fa fa-fw fa-flag"></i></button>
                                        <button type="button" class="btn  btn-success ">
                                            <i class="fa fa-fw fa-wechat"></i></button>
                                        <button type="button" class="btn  btn-warning btn-outline btn-sm ">
                                            <i class="fa fa-fw fa-windows"></i></button>
                                        <button type="button" class="btn  btn-info btn-outline btn-xs">
                                            <i class="fa fa-fw fa-calendar"></i></button>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>两端圆角<code>.btn-round</code></p>
                                    <p>
                                        <button type="button" class="btn  btn-default btn-round">两端圆角</button>
                                        <button type="button" class="btn  btn-primary btn-round">两端圆角</button>
                                        <button type="button" class="btn  btn-success btn-round">两端圆角</button>
                                        <button type="button" class="btn  btn-info btn-outline btn-round">两端圆角</button>
                                        <button type="button" class="btn  btn-warning btn-sm btn-round">两端圆角</button>
                                        <button type="button" class="btn  btn-danger btn-xs btn-round">两端圆角</button>
                                    </p>
                                    <p>半边圆角
                                        <code>.btn-round-left</code>
                                        <code>.btn-round-right</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn  btn-default btn-round-left">左边圆角</button>
                                        <button type="button" class="btn  btn-primary btn-round-right">右边圆角</button>
                                        <button type="button" class="btn  btn-success btn-round-left">左边圆角</button>
                                        <button type="button"
                                            class="btn  btn-success btn-outline btn-round-right">右边圆角</button>
                                    </p>
                                    <p>
                                        <button type="button"
                                            class="btn  btn-warning btn-sm btn-outline btn-round-left">左边圆角</button>
                                        <button type="button"
                                            class="btn  btn-warning btn-sm  btn-round-right">右边圆角</button>
                                        <button type="button"
                                            class="btn  btn-danger btn-xs  btn-round-left">左边圆角</button>
                                        <button type="button"
                                            class="btn  btn-danger btn-xs btn-outline btn-round-right">右边圆角</button>
                                    </p>

                                    <p>圆形按钮
                                        <code>.btn-circle</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn  btn-primary btn-circle btn-lg">
                                            <i class="fa fa-plane"></i></button>
                                        <button type="button" class="btn  btn-success btn-outline btn-circle btn-lg">
                                            <i class="fa  fa-flag"></i></button>
                                        <button type="button" class="btn  btn-primary btn-circle"><i
                                                class="fa  fa-windows"></i></button>
                                        <button type="button" class="btn  btn-danger btn-circle btn-outline"><i
                                                class="fa  fa-qq"></i></button>
                                        <button type="button" class="btn  btn-warning btn-circle btn-outline"><i
                                                class="fa  fa-weibo"></i></button>
                                    </p>
                                    <p>无边按钮
                                        <code>.btn-noline</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn  btn-primary btn-noline">
                                            <i class="fa fa-plane"></i></button>
                                        <button type="button" class="btn  btn-success btn-noline btn-lg">
                                            <i class="fa  fa-flag"></i></button>
                                        <button type="button" class="btn  btn-primary btn-noline"><i
                                                class="fa  fa-windows"></i></button>
                                        <button type="button" class="btn  btn-danger btn-noline"><i
                                                class="fa  fa-qq"></i></button>
                                        <button type="button" class="btn  btn-warning btn-noline"><i
                                                class="fa  fa-weibo"></i></button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            按钮组
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>按钮组
                                        <code>.btn-group</code>
                                        垂直对齐<code>.btn-group-vertical</code>
                                    </p>
                                    <div class="btn-group">
                                        <button class="btn btn-success" type="button"><i
                                                class="fa fa-play"></i></button>
                                        <button class="btn btn-success" type="button"><i
                                                class="fa fa-pause"></i></button>
                                        <button class="btn btn-success" type="button"><i
                                                class="fa fa-stop"></i></button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-success btn-noline" type="button"><i
                                                class="fa fa-play"></i></button>
                                        <button class="btn btn-primary btn-noline" type="button"><i
                                                class="fa fa-pause"></i></button>
                                        <button class="btn btn-danger btn-noline" type="button"><i
                                                class="fa fa-stop"></i></button>
                                    </div>
                                    <div class="btn-group-vertical">
                                        <button class="btn btn-primary" type="button">上面</button>
                                        <button class="btn btn-success" type="button">中间</button>
                                        <button class="btn btn-warning" type="button">下面</button>
                                    </div>
                                    <p>工具栏按钮组<code>.btn-toolbar</code></p>
                                    <div class="btn-toolbar">
                                        <div class="btn-group">
                                            <button class="btn btn-info" type="button"><i
                                                    class="fa fa-font"></i></button>
                                            <button class="btn btn-info" type="button"><i
                                                    class="fa fa-bold"></i></button>
                                            <button class="btn btn-info" type="button"><i
                                                    class="fa fa-italic"></i></button>

                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-primary" type="button"><i
                                                    class="fa fa-text-height"></i></button>
                                            <button class="btn btn-primary" type="button"><i
                                                    class="fa fa-text-width"></i></button>
                                            <button class="btn btn-primary" type="button"><i
                                                    class="fa fa-align-left"></i></button>
                                            <button class="btn btn-primary" type="button"><i
                                                    class="fa fa-align-center"></i></button>
                                            <button class="btn btn-primary" type="button"><i
                                                    class="fa fa-align-right"></i></button>
                                            <button class="btn btn-primary" type="button"><i
                                                    class="fa fa-align-justify"></i></button>

                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-info" type="button"><i
                                                    class="fa fa-briefcase"></i></button>
                                            <button class="btn btn-info" type="button"><i
                                                    class="fa fa-arrows-alt"></i></button>
                                            <button class="btn btn-info" type="button"><i
                                                    class="fa fa-video-camera"></i></button>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-primary"> <input type="checkbox">苹果
                                        </label> <label class="btn btn-primary"> <input type="checkbox">橘子
                                        </label> <label class="btn btn-primary"> <input type="checkbox">西瓜
                                        </label>
                                    </div>
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-default active"> <input type="radio" name="options"
                                                id="option1">
                                            土豆
                                        </label> <label class="btn btn-default"> <input type="radio" name="options"
                                                id="option2">白菜
                                        </label> <label class="btn btn-default"> <input type="radio" name="options"
                                                id="option3"> 豆芽
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <p>两端对齐按钮组
                                        <code>.btn-group .btn-group-justified</code>
                                    </p>
                                    <p>
                                    <div class="btn-group btn-group-justified">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-info"><i
                                                    class="icon fa fa-star"></i><br>收藏</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary"><i
                                                    class="icon fa fa-home"></i><br>信息</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-success"><i
                                                    class="icon fa fa-star"></i><br>查看</button>
                                        </div>
                                    </div>
                                    </p>
                                    <p>
                                    <div class="btn-group btn-group-justified">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary">重要</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-success">成功</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-info">信息</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-warning">警告</button>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-danger">危险</button>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            块级按钮
                        </div>
                        <div class="panel-body">
                            <p>块级按钮
                                <code>.btn-block</code>
                            </p>
                            <div class="col-md-12">
                                <p>
                                    <button type="button" class="btn btn-primary btn-block btn-lg">块级大按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-success btn-block ">块级大按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-info btn-block btn-sm">块级小按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-warning btn-block btn-xs">块级mini按钮</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            块级描边按钮
                        </div>
                        <div class="panel-body">
                            <p>块级描边按钮
                                <code>.btn-block</code>
                                <code>.btn-outline</code>
                            </p>
                            <div class="col-md-12">
                                <p>
                                    <button type="button" class="btn btn-primary btn-block btn-lg btn-outline">块级大按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-success btn-block btn-outline">块级大按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-info btn-block btn-sm btn-outline">块级小按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-warning btn-block btn-xs btn-outline">块级mini按钮</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            块级圆角按钮
                        </div>
                        <div class="panel-body">
                            <p>块级圆角按钮
                                <code>.btn-block</code>
                                <code>.btn-round</code>
                            </p>
                            <div class="col-md-12">
                                <p>
                                    <button type="button" class="btn btn-primary btn-block btn-lg btn-round">块级大按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-success btn-block btn-round">块级大按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-info btn-block btn-sm btn-round">块级小按钮</button>
                                </p>
                                <p>
                                    <button type="button" class="btn btn-warning btn-block btn-xs btn-round">块级mini按钮</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>